import React, { useRef, useEffect, useState } from "react";
import { Form, Input, Select, Button, message } from "antd";
import "@toast-ui/editor/dist/toastui-editor.css";
import { Editor } from "@toast-ui/react-editor";
// import "@toast-ui/editor/dist/i18n/zh-cn.js";
import { typeOptionCreator } from "../../utils/tools";
import { useDispatch, useSelector } from "react-redux";
import { getTypeList } from "@/redux/typeSlice";
import { addIssue } from "@/api/issue";
import { useNavigate } from "react-router-dom";
export default function AddIssue() {
  const dispatch = useDispatch();
  const navigate = useNavigate();
  const editorRef = useRef();
  const formRef = useRef();
  const { typeList } = useSelector((state) => state.type);
  const { userInfo } = useSelector((state) => state.user);
  const [issueInfo, setIssueInfo] = useState({
    issueTitle: "",
    issueContent: "",
    userId: "",
    typeId: "",
  });

  function updateInfo(newContent, key) {
    const newIssueInfo = { ...issueInfo };
    newIssueInfo[key] = newContent;
    setIssueInfo(newIssueInfo);
  }

  const finishAddIssue = async (values) => {
    // 获得markdown内容
    const content = editorRef.current.getInstance().getHTML();
    const issue = { ...values, issueContent: content, userId: userInfo._id };
    await addIssue(issue);
    navigate("/");
    message.success("提交成功，请等待审核通过");
  };

  const handleSelectChange = (value) => {
    updateInfo(value, "typeId");
  };

  useEffect(() => {
    if (!typeList.length) {
      dispatch(getTypeList());
    }
  }, []);

  return (
    <div style={{ margin: "20px" }}>
      <Form
        name="basic"
        initialValues={issueInfo}
        autoComplete="off"
        ref={formRef}
        onFinish={finishAddIssue}
      >
        <Form.Item
          label="标题"
          name="issueTitle"
          rules={[
            {
              required: true,
              message: "请输入标题",
            },
          ]}
        >
          <Input
            placeholder="请输入标题"
            onChange={(e) => updateInfo(e.target.value, "issueTitle")}
          />
        </Form.Item>

        <Form.Item
          label="问题分类"
          name="typeId"
          rules={[
            {
              required: true,
            },
          ]}
        >
          <Select style={{ width: 200 }} onChange={handleSelectChange}>
            {typeOptionCreator(Select, typeList)}
          </Select>
        </Form.Item>

        <Form.Item
          label="问题描述"
          name="issueContent"
          rules={[
            {
              required: true,
              message: "请输入问题",
            },
          ]}
        >
          <Editor
            initialValue=""
            previewStyle="vertical"
            height="600px"
            initialEditType="markdown"
            language="zh-CN"
            useCommandShortcut={true}
            ref={editorRef}
          />
        </Form.Item>

        <Form.Item label={null}>
          <Button type="primary" htmlType="submit" style={{ marginLeft: "90px" }}>
            确认新增
          </Button>
        </Form.Item>
      </Form>
    </div>
  );
}
